//flex布局
// .flex {
//   display: flex;
// }

//伪元素的flex
// <div class="flex-before">

$Pseudo:(
  before:before,
  after:after,
);
@each $key,$value in $Pseudo {
  .flex-#{$key}::#{$key}{
    display: flex !important;
    content: '' !important;
  }
}
$tabledo:(
  before:before,
  after:after,
);
@each $key,$value in $tabledo {
  .table-#{$key}::#{$key}{
    display: table !important;
    content: '' !important;
  }
}
$flexwrap:(
  wrap:wrap,
  wrap-reverse:wrap-reverse,
  nowrap:nowrap
);
@each $key,$value in $flexwrap {
  .flex-#{$key}{
    flex-wrap: $value;
  }
}

.flex-grow {
  flex-grow: 1;
}
.flex-grow-0 {
  flex-grow: 0;
}

//控制 Flex 子项的方向的功能类
$flexdirection:(
  col:column,
  col-reverse:column-reverse,
  row:row,
  row-reverse:row-reverse
);
@each $key,$value in $flexdirection{
  .flex-#{$key}{
    flex-direction: $value 
  }
}

.flex-1{
  flex: 1 1 0%;
}	
.flex-auto{
  flex: 1 1 auto;
}	
.flex-initial{
  flex: 0 1 auto;
}	
.flex-none{
  flex: none;
}	
.flex-shrink-0{
  flex-shrink: 0;
}	
.flex-shrink{
  flex-shrink: 1;
}	
/*************************content变量*******************************/
//justify-content变量
$justify-content: (
  "start": flex-start,
  "end": flex-end,
  "center": center,
  "between": space-between,
  "around": space-around,
  "evenly": space-evenly,
);

//justify-content
@each $jcKey, $value in $justify-content {
  .flex-jc-#{$jcKey} {
    display: flex;
    justify-content: $value;
  }
}

//align-content变量
$align-content: (
  "start": flex-start,
  "end": flex-end,
  "center": center,
  "between": space-between,
  "around": space-around,
  "evenly": space-evenly,
);

@each $jcKey, $value in $align-content{
  .flex-ac-#{$jcKey} {
    align-content: $value;
  }
}

//Place Content
$place-content: (
  "start": start,
  "end": end,
  "center": center,
  "between": space-between,
  "around": space-around,
  "evenly": space-evenly,
  "stretch": stretch,
);

@each $Key, $value in $place-content{
  .place-content-#{$Key} {
    place-content: $value;
  }
}
/*********************items变量***********************************/
//justify-items
$justify-items: (
  "auto": auto,
  "start": start,
  "end": end,
  "center": center,
  "stretch": stretch,
);

@each $Key, $value in $justify-items {
  .flex-ji-#{$Key} {
    justify-items:$value;
  }
}

//align-items变量
$align-items: (
  "start": flex-start,
  "end": flex-end,
  "center": center,
  "baseline": baseline,
  "strecth": strecth
);

@each $aiKey, $value in $align-items {
  .flex-ai-#{$aiKey} {
    display: flex;
    align-items: $value;
  }
}


//Place Items
$place-items:(
  "auto": auto,
  "start": start,
  "end": end,
  "center": center,
  "stretch": stretch,
);

@each $Key, $value in $place-items{
  .place-items-#{$Key} {
    place-items: $value;
  }
}


/*********************self变量***********************************/
//justify-self
$flex-self: (
  "auto": auto,
  "start": start,
  "end": end,
  "center": center,
  "stretch": stretch,
);

@each $Key, $value in $flex-self {
  .justify-self-#{$Key} {
    justify-self: $value;
  }
}

//align-self
$align-self: (
  "auto": auto,
  "start": start,
  "end": end,
  "center": center,
  "stretch": stretch,
);

@each $Key, $value in $align-self {
  .align-self-#{$Key} {
    align-self: $value;
  }
}

//Place-self
$place-self: (
  "auto": auto,
  "start": start,
  "end": end,
  "center": center,
  "stretch": stretch,
);

@each $Key, $value in $place-self{
  .place-self-#{$Key} {
    place-self: $value;
  }
}





$order:(
  first:-9999,
  last:9999,
  none:0,
  1:1,
  2:2,
  3:3,
  4:4,
  5:5,
  6:6,
  7:7,
  8:8,
  9:9,
  10:10,
  11:11,
  12:12,
  13:13,
  14:14,
);
@each $key,$value in $order{
  .order-#{$key}{
    order:$value
  }
}